<template>
    <div class="BookAnimation" :style="{fontSize:fontsize + 'px'}">
        <div class="box_box">
            <div class="book" ref="bookbox">
                <div class="page" @click="initPage">最后一页</div>
                <!--  -->
                <div class="page" v-for="(item,index) in pageArry" @click="transformPage" :key="index" ref="page">
                    <p v-for="(txt,key) in item" :key="key" :style=" {paddingBottom:padHight +'px'}">
                        {{txt}}</p>
                </div>
                <div class="page" @click="transformPage" style="text-align:center" ref="prepage">{{chaptertitle}}</div>
            </div>
        </div>
    </div>
</template>
<script>
    import './BookAnimation.scss';
    import localrequest from '../assets/localapi/fake.js';

    export default {
        name: 'BookAnimation',
        props: ['fontsize', 'padHight', 'chaptertitle'],
        data() {
            return {
                // 行高

                pages: ["1", "2", "3", "4"],
                txt: "",

                // 行数分割数组
                rowArry: [],
                // 每页多少行  pageArry:[[],[]] 二维数组
                pageArry: [
                    []
                ]
            }
        },
        mounted() {

        },
        created() {

            this.$nextTick(() => {
                this.$toast.loading();
                this.getlocaltion();
            })
        },
        // 
        methods: {

            // 翻页归0
            initPage() {
                console.log(this.$refs);

                this.$refs.page.map(item => {
                    item.style.transform = 'perspective(2000px) rotateY(0deg)';
                })
                this.$refs.prepage.style.transform = 'perspective(2000px) rotateY(0deg)';
            },
            // 翻页点触
            transformPage(e) {

                // 获取点击位置
                let cName = e.target.className;
                let clickposX = e.clientX;
                let el = e.target;

                // console.log(cName=="page",typeof(cName));

                if (cName != "page") {
                    el = e.target.parentNode;
                }
                // if (cName == "page") {
                //     // console.log(el);
                // }

                let pagewidth = el.scrollWidth;



                if (clickposX > pagewidth / 2) {
                    this.nextPage(el);
                } else {
                    this.prevPage(el);
                }

            },
            // 上一页
            prevPage(e) {
                // 获取到 class 名为 page 的元素下一个兄弟元素
                let a = e.nextElementSibling;
                if (a != null) {
                    a.style.transform = 'perspective(2000px) rotateY(0deg)';
                }
            },
            // 下一页
            nextPage(e) {
                // 获取到 class 名为 page 的元素
                let a = e;
                // 获取到 class 名为 page 的元素上一个兄弟元素
                let b = e.previousElementSibling;
                if (b != null) {
                    a.style.transform = 'perspective(2000px) rotateY(-180deg)';
                }
            },

            // 分页分行处理
            getxt() {

                let minsize = parseInt(this.fontsize) + 2;
                let width = this.$refs.bookbox.scrollWidth;
                let height = this.$refs.bookbox.scrollHeight;

                //每行字数
                // console.log(typeof( this.padHight ));
                let xnum = parseInt(width / minsize);
                // 每页多少行 this.padHight
                let ynum = parseInt(height / (minsize + parseInt(this.padHight) * 2));
                // console.log(xnum, ynum);


                // 分页处理
                // 1.按照段落分割 
                let textArry = this.txt.split('\n');

                // 2. 按照每一行多少字二次分割
                let rowArry = [];
                textArry.map((item) => {

                    // for(let i=0;i<=Math.ceil( item.length/xnum);i++){
                    //     // 把段落数组按照每一行多少字二次分割，存进rowArry中
                    //     // 如果当前字符存在
                    //     rowArry.push(item.slice(i*xnum,(i+1)*xnum));
                    // }
                    let start = 0;
                    for (let i = 0; i <= item.length; i++) {

                        // 遍历每组,匹配所有空格,空格算作0.5个字符,并且替换成空格符
                        if (/\s/.test(item[i])) {
                            i -= 0.75
                            // item[i] = "&nbsp;";
                        }
                        // console.log(i);
                        // 缺残补全
                        if (i % xnum == xnum - 1.5 && i != 0) {
                            i += 0.25;
                        }
                        // 条件存储
                        if (i % xnum >= xnum - 1) {
                            // .replace(/\s*/g, '\u00a0')
                            rowArry.push(item.slice(start, Math.floor(start + xnum)));
                            start = Math.ceil(start + xnum);
                        }
                        // 尾部处理
                        if (Math.ceil(i) == item.length && (i % xnum < xnum - 1)) {
                            // console.log('尾部处理=》', start,item.slice(start, item.length));
                            rowArry.push(item.slice(start, item.length));
                        }
                    }

                })

                // console.log({
                //     textArry: textArry
                // });
                // console.log({
                //     rowArry: rowArry
                // });


                //本章节共分多少行 
                this.rowArry = rowArry;
                let pageArry = [];
                let pageArryChild = [];
                //处理每页多少行 ynum
                rowArry.map((item, index) => {

                    // 分页处理
                    if (index % ynum == 0 && index != 0) {
                        pageArry.push(pageArryChild);
                        // 数组清空
                        pageArryChild = [];
                    }

                    // 尾部处理
                    if (index == rowArry.length - 1) {
                        pageArry.push(pageArryChild);
                        pageArryChild = [];

                    }
                    pageArryChild.push(item);
                })

                // console.log({pageArry: pageArry});

                this.pageArry = pageArry.reverse();
            },

            // 获取本地数据测试
            getlocaltion() {
                localrequest.getData('text.json').then(res => {
                    // console.log(typeof (res.data));
                    this.txt = res.data;
                    this.getxt();
                });
            }
        },
        computed: {
            // .reverse()
            pagesReverse() {
                // 深拷贝一份数组
                let pagearry = this.pages.slice(0);
                // console.log(this.pages)
                return pagearry.reverse();
            }
        },
        watch: {
            fontsize() {
                this.getxt()
            }
        },
    }
</script>